<template>
  <div class="register_wrapper">
    <div class="resgier_inner" style="">
      <Title></Title>
      <div class="form_wrapper">
        <div class="form_inner" style="max-width: 600px;margin: 0 auto;padding: 10px;">
          <el-input placeholder="请输入内容" v-model="username" clearable></el-input>
          <el-input placeholder="请输入密码" v-model="pwd1" show-password></el-input>
          <el-input placeholder="请输入密码" v-model="pwd2" show-password></el-input>
          <div class="radio_wrapper">
            <div class="radio_inner" style="margin-top: 15px;margin-bottom: 15px;">
              <el-radio v-model="radio" label="1">男</el-radio>
              <el-radio v-model="radio" label="2">女</el-radio>
            </div>
          </div>
          <el-button @click="register_method" type="primary" :loading="loading" style="width: 100%;">
            {{btn_name}}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Title from "../smallcom/Title";
  import {postRequest} from "../../utils/api";
  import {strsutils} from "../../utils/strutils";

  export default {
    name: "Register",
    data(){
      return {
        username: '',
        pwd1: '',
        pwd2: '',
        btn_name: '注册',
        loading: false,
        radio: '1'
      }
    },
    methods: {
      checkedOK(){
        if(this.username != null&this.username!=''&this.pwd1==this.pwd2&this.pwd1!=null&this.pwd1!=''){
          return true
        }
        return false
      },
      register_method(){
        if(this.checkedOK()){
          this.btn_name = '加载中'
          this.loading = true
          let param = {
            username: this.username,
            password: this.pwd1
          }
          postRequest(strsutils.baseurl+'/register', param).then(res=>{
            console.debug("注册成功")
            this.btn_name = '注册'
            this.loading = false
            this.$message.success('注册成功')
            this.$router.replace('/')
          }).catch(err=>{
            console.debug("注册失败"+err)
            this.btn_name = '注册'
            this.loading = false
            this.$message.error('注册失败')
          })
        }else{
          this.$message.error('请检查用户名或密码')
        }
      }
    },
    components: {Title}
  }
</script>

<style scoped>
  .form_inner .el-input{margin: 5px auto;}
</style>
